<template>
<div>
    <el-card class="box-card">
        <el-form label-width="80px">
            <el-form-item label="头像">
                <img :src="loginInfo.avatar" style="float:left;width: 145px;height: 145px;border-radius: 10px">
                <!--上传组件开始-->
                <el-upload
                        action="http://192.168.88.130:28082/upload/image/user-avatar"
                        name="file"
                        :limit=1
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-success="handleSuccess"
                        :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                <!--上传组件结束-->
            </el-form-item>

            <el-form-item label="昵称">
                <el-input style="width: 200px" v-model="loginInfo.name" placeholder="请输入昵称"></el-input>
            </el-form-item>
            <el-form-item label="用户名">
                <el-input style="width: 200px" v-model="loginInfo.username" disabled ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="submitUserForm()">保存信息</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</div>
</template>

<script>
import BaseUrl from "@/http/BaseUrl";
import TokenAxios from "@/http/TokenAxios";

export default {
    data(){
        return {
            imageUrl: '',
            dialogImageUrl: '',
            dialogVisible: false,
            loginInfo:[]

        }
    },
    methods: {
        // 保存信息的操作
        submitUserForm(){
            let upload={
                id:this.loginInfo.id,
                nickName:this.loginInfo.name}

            if (this.imageUrl!==""){//这个地方如果改成""则不会入数据库
                upload.avatar=this.imageUrl;
                this.loginInfo.avatar=this.imageUrl;
            }
            let url=BaseUrl.USER_ALL+'/user/info/update';
            console.log(url);
            TokenAxios.post(url,upload).then((response)=>{
                if (response.data.state===20000){
                    // localStorage.this.loginInfo=JSON.stringify(this.loginInfo);
                    localStorage.setItem('loginInfo', JSON.stringify(this.loginInfo))
                    location.reload();
                }
            })

        },
        handleRemove(file, fileList) {
            this.imageUrl="";
            console.log(file,fileList);
            let url=BaseUrl.USER_ALL+'/user/info/remove?url='+file.response.data;
            TokenAxios.post(url).then((response)=>{
                if (response.data.state===20000){
                    this.$message.success("服务器文件删除成功");
                }
            })
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleSuccess(response,file,fileList){
            this.imageUrl=response.data.url;
            console.log(this.imageUrl)
        },
        loadCurrentLoginInfo(){
            let loginInfoString=localStorage.getItem('loginInfo')

            this.loginInfo = JSON.parse(loginInfoString);
            if (!this.loginInfo) {
                this.$router.push('/login/user');
                return;
            }else if (this.loginInfo.role!==1&&this.loginInfo.role!==2){
                this.$message.error('无权访问');
                this.$router.push('/home');
                return;
            }


        },
    },
    created() {

    },
    mounted() {
        this.loadCurrentLoginInfo();
    }
}
</script>
<style>
body{
    background-color: rgb(241,242,243);
}
</style>
